<template>
  <div class="main-box scroll">
    <div class="table-box">
      <el-tabs v-model="activeName" tab-position="bottom">
        <el-tab-pane label="总体告警监控" name="all">
          <ProTable
            v-if="activeName === 'all'"
            ref="proTable"
            title="总体告警监控"
            highlight-current-row
            :columns="allColumns"
            :request-api="getTableList"
            :pagination="true"
            :show-summary="false"
            :init-param="initParam"
            :indent="20"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
          >
          </ProTable>
        </el-tab-pane>
        <el-tab-pane label="告警源监控" name="resoure">
          <ProTable
            v-if="activeName === 'resoure'"
            ref="proTable"
            title="告警源监控"
            highlight-current-row
            :columns="resoureColumns"
            :request-api="getTableList"
            :pagination="true"
            :show-summary="false"
            :init-param="initParam"
            :indent="20"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
          >
          </ProTable>
        </el-tab-pane>
        <el-tab-pane label="第三方监控" name="thrid">
          <ProTable
            v-if="activeName === 'thrid'"
            ref="proTable"
            title="第三方监控"
            highlight-current-row
            :columns="thridColumns"
            :request-api="getTableList"
            :pagination="true"
            :show-summary="false"
            :init-param="initParam"
            :indent="20"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
          >
          </ProTable>
        </el-tab-pane>
        <el-tab-pane label="容量监控" name="capacity">
          <el-tabs tab-position="left" class="capacity-tabs" v-model="activeName2">
            <el-tab-pane label="可用分区" name="zone">
              <ProTable
                v-if="activeName === 'capacity' && activeName2 === 'zone'"
                ref="proTable"
                title="容量监控"
                highlight-current-row
                :columns="regionColumns"
                :request-api="getTableList"
                :pagination="true"
                :show-summary="false"
                :init-param="capacityZoneInitParam"
                :indent="20"
                :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
              >
              </ProTable>
            </el-tab-pane>
            <el-tab-pane label="资源域" name="region">
              <ProTable
                v-if="activeName === 'capacity' && activeName2 === 'region'"
                ref="proTable"
                title="容量监控"
                highlight-current-row
                :columns="domainColumns"
                :request-api="getTableList"
                :pagination="true"
                :show-summary="false"
                :init-param="capacityRegionInitParam"
                :indent="20"
                :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
              >
              </ProTable>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts" name="OMMonitor">
// import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Role } from "@/api/interface/roleManagement";
// import { getRoleList } from "@/api/modules/roleManagement";
import { reactive, ref } from "vue";
// import { useHandleData } from "@/hooks/useHandleData";
// import { Plus } from "@element-plus/icons-vue";
// import modalAssociatedUsers from "@/views/sysManagement/role_management/component/modal_associated_users.vue";
// import modalAddOrEdit from "@/views/sysManagement/role_management/component/modal_add_or_edit.vue";
import ProTable from "@/components/ProTable/index.vue";
import {
  getAlarmOverviewList,
  getAlarmSourceList,
  getAppConditionList,
  getCapacityList,
  getResourceTypes,
  getSystemNamesList
} from "@/api/modules/monitorManagement/OMManagement";
// import { useRoute } from "vue-router";
// import { useAuthStore } from "@/stores/modules/auth";
// const route = useRoute();
// const authStore = useAuthStore();
// const thisPermission = computed(() => authStore.permissionListGet[route.name as string] || {});
// import { ElMessage } from "element-plus";
// ProTable 实例
const activeName = ref("all");
const activeName2 = ref("zone"); //容量监控
const proTable = ref<ProTableInstance>();
// 列表API
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.created_time && (newParams.start_time = newParams.created_time[0]);
  newParams.created_time && (newParams.end_time = newParams.created_time[1]);
  delete newParams.created_time;
  switch (activeName.value) {
    case "all":
      return getAlarmOverviewList(newParams);
      break;
    case "resoure":
      return getAlarmSourceList(newParams);
      break;
    case "thrid":
      return getAppConditionList(newParams);
      break;
    case "capacity":
      return getCapacityList(newParams);
      break;
    default:
      return getAlarmOverviewList(newParams);
  }
};
// 表格配置项
const allColumns = reactive<ColumnProps<Role.ResRoleList>[]>([
  { type: "index", label: "#", width: 80 },
  {
    prop: "system_type",
    label: "系统类型",
    search: { el: "select" },
    enum: async () => {
      let { data } = await getResourceTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    width: 150
  },
  {
    prop: "system_name",
    label: "系统名称",
    search: { el: "select" },
    enum: async () => {
      let { data } = await getSystemNamesList();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    minWidth: 200
  },
  {
    prop: "not_handled",
    label: "未处置告警",
    _children: [
      { prop: "not_handled_period_24_hour", label: "24H总量", minWidth: 200 },
      { prop: "not_handled_period_week", label: "当周总量", minWidth: 200 }
    ]
  },
  {
    prop: "not_handled_importance",
    label: "未处置重点关注告警",
    _children: [
      { prop: "not_handled_period_24_hour_importance", label: "24H总量", minWidth: 200 },
      { prop: "not_handled_period_week_importance", label: "当周总量", minWidth: 200 }
    ]
  },
  { prop: "average_processing_duration", label: "告警处理平均耗时", minWidth: 200 },
  {
    prop: "created_time",
    label: "最新修改时间",
    search: {
      el: "date-picker",
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
      span: 2,
      label: "时间范围"
    },
    width: 200
  }
]);
const resoureColumns = reactive<ColumnProps<Role.ResRoleList>[]>([
  { type: "index", label: "#", width: 80 },
  {
    prop: "system_type",
    label: "系统类型",
    search: { el: "select" },
    enum: async () => {
      let { data } = await getResourceTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    width: 150
  },
  {
    prop: "system_name",
    label: "系统名称",
    search: { el: "select" },
    enum: async () => {
      let { data } = await getSystemNamesList();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    minWidth: 200
  },
  { prop: "resourceName", label: "告警源名称", search: { el: "input" }, width: 200 },
  { prop: "count_today", label: "当日告警量", width: 200 },
  { prop: "count_week", label: "当周告警量", width: 200 },
  { prop: "count_month", label: "当月告警量", width: 200 },
  {
    prop: "created_time",
    label: "最新修改时间",
    search: {
      el: "date-picker",
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
      span: 2,
      label: "时间范围"
    },
    width: 200
  }
]);
const thridColumns = reactive<ColumnProps<Role.ResRoleList>[]>([
  { type: "index", label: "#", width: 80 },
  {
    prop: "system_type",
    label: "系统类型",
    search: { el: "select" },
    enum: async () => {
      let { data } = await getResourceTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    width: 150
  },
  {
    prop: "system_name",
    label: "系统名称",
    search: { el: "select" },
    enum: async () => {
      let { data } = await getSystemNamesList();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    minWidth: 200
  },
  { prop: "auth_api_available", label: "认证接口是否可用", width: 200 },
  { prop: "data_api_available", label: "数据接口是否可用", width: 200 },
  { prop: "not_handled_ticket", label: "本月未处置工单", width: 200 },
  { prop: "not_handled_ticket_proportion", label: "本月未处置工单占比", width: 200 },
  {
    prop: "created_time",
    label: "最近修改时间",
    search: {
      el: "date-picker",
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
      span: 2,
      label: "时间范围"
    },
    width: 200
  }
]);
const regionColumns = reactive<ColumnProps<Role.ResRoleList>[]>([
  { type: "index", label: "#", width: 80 },
  {
    prop: "system_type",
    label: "系统类型",
    search: { el: "select" },
    enum: async () => {
      let { data } = await getResourceTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    isShow: false,
    width: 150
  },
  {
    prop: "system_name",
    label: "系统名称",
    search: { el: "select" },
    enum: async () => {
      let { data } = await getSystemNamesList();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    isShow: false,
    width: 150
  },
  { prop: "zone", label: "可用分区", width: 150 },
  { prop: "cloud", label: "所属云", minWidth: 200 },
  { prop: "region", label: "所属资源域", minWidth: 200 },
  { prop: "cpu_usages", label: "CPU使用量(核)", minWidth: 200 },
  { prop: "cpu_usages_rate", label: "CPU使用率", minWidth: 200 },
  { prop: "memory_usages", label: "内存使用量(MB)", minWidth: 200 },
  { prop: "memory_usages_rate", label: "内存使用率", minWidth: 200 },
  { prop: "storage_usages", label: "存储使用量(T)", minWidth: 200 },
  { prop: "storage_usages_rate", label: "存储使用率", minWidth: 200 },
  {
    prop: "created_time",
    label: "最近修改时间",
    search: {
      el: "date-picker",
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
      span: 2,
      label: "时间范围"
    },
    width: 200
  }
]);
const domainColumns = reactive<ColumnProps<Role.ResRoleList>[]>([
  { type: "index", label: "#", width: 80 },
  {
    prop: "system_type",
    label: "系统类型",
    search: { el: "input" },
    enum: async () => {
      let { data } = await getResourceTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    isShow: false,
    width: 150
  },
  {
    prop: "system_name",
    label: "系统名称",
    search: { el: "input" },
    enum: async () => {
      let { data } = await getSystemNamesList();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    isShow: false,
    width: 150
  },
  { prop: "region", label: "资源域", width: 150 },
  { prop: "cloud", label: "所属云", minWidth: 200 },
  { prop: "cpu_usages", label: "CPU使用量(核)", minWidth: 200 },
  { prop: "cpu_usages_rate", label: "CPU使用率", minWidth: 200 },
  { prop: "memory_usages", label: "内存使用量(MB)", minWidth: 200 },
  { prop: "memory_usages_rate", label: "内存使用率", minWidth: 200 },
  { prop: "storage_usages", label: "存储使用量(T)", minWidth: 200 },
  { prop: "storage_usages_rate", label: "存储使用率", minWidth: 200 },
  {
    prop: "created_time",
    label: "最近修改时间",
    search: {
      el: "date-picker",
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
      span: 2,
      label: "时间范围"
    },
    width: 200
  }
]);
// const capacityForm = reactive({
//   name: "",
//   region: "",
//   date1: ""
// });
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
const capacityZoneInitParam = reactive({ monitor_type: "zone" });
const capacityRegionInitParam = reactive({ monitor_type: "region" });
// 总体告警监控
// const alarmOverviewList = ref<any>([]);
// const getAlarmOverviewData = async () => {
//   const { data } = await getAlarmOverviewList();
//   console.log(data);
//   alarmOverviewList.value = data;
// };
// getAlarmOverviewData();
</script>

<style lang="scss" scoped>
@import "index";
.main-box {
  flex-direction: row;
  height: 100%;
  :deep(.table-box) {
    .el-tabs__header {
      padding: 10px 18px;
      padding-bottom: 0;
      margin-top: 0;
    }
  }
  &-left {
    display: flex;
    width: 250px;
    margin-right: 10px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 8px 0 #e6e6e6;
  }
  &-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
  }
}
</style>
